<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-form :model="form" :rules="userFormRules" ref="form">
                    <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                        <el-input type="text" maxlength="11" v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth"> 
                        <el-radio label="0" v-model="form.sex" name="sex">男</el-radio>
                        <el-radio label="1" v-model="form.sex" name="sex">女</el-radio>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介">
                        <el-input
                            type="textarea"
                            placeholder="请输入个人简介"
                            v-model="form.desc"
                            maxlength="200"
                            show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save()">修改资料</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
    </div>
    
</template>
<script>
export default {
  data() {
    return {
        // 用户数据
        form: {
            _id: "615ea1e450fef92fb45cbdc3",
            username: "",
            phone: "",
            sex: "0", 
            desc: "",
            email: "",
        },
        formLabelWidth: "70px",
        // 输入框校验规则
        userFormRules: {
            username: [
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
            ],
            phone: [
            { required: true, message: "请输入手机号", trigger: "blur" },
            { min: 11, max: 11, message: "请输入手机号", trigger: "blur" }
            ]
        }
    }
  },
  created() {
    // this.userList();
    this.form = Object.assign( this.form , JSON.parse(sessionStorage.getItem('userInfo')) || {});
    
    console.log(this.form )
  },
  computed: {     
  },
  methods: {
    // 保存个人信息
    async save () {
        const that = this;
        const { data:res } = await that.$http.post("admin/user/userEdit", this.form);
        if (res.code !== 200) {
            return that.$message({
            message: res.msg,
            type: "error"
            });
        }
        that.$message({
            message: res.msg,
            type: "success"
        });
        
        // 更新用户信息
        window.sessionStorage.setItem('userInfo',JSON.stringify(this.form))
    }
  }
}
</script>
<style scoped>

</style>
